<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <div class="search">
      <el-form ref="search" :inline="true" :model="search">
        <!-- 人员搜索 -->
        <el-form-item label="人员搜索:" size="medium">
          <el-input v-model="search.userName" clearable placeholder="请输入" />
        </el-form-item>
        <!-- 角色 -->
        <el-form-item label="角色:" size="medium">
          <el-select v-model="search.isRepair" clearable placeholder="请选择">
            <el-option
              v-for="item in isRepair"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          class="my-primary1"
          icon="el-icon-search"
          @click="getWorkLoadList"
        >查询</el-button>
      </el-form>
    </div>

    <!-- 表单区域 -->
    <div class="result">
      <!-- 头部 -->
      <!-- 表单主体 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="index"
          :index="(index) => (search.pageIndex - 1) * 10 + (index + 1)"
          label="序号"
          width="80"
        />
        <el-table-column prop="userName" label="人员名称" />
        <el-table-column prop="roleName" label="角色" />
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column prop="workCount" label="完成工单(本月)" />
        <el-table-column prop="progressTotal" label="进行中工单" />
        <el-table-column prop="cancelCount" label="拒绝工单(本月)" />
        <el-table-column label="操作" width="100">
          <template v-slot="{ row }">
            <el-button
              type="text"
              class="el-button--primary-text"
              @click="showDetailDialog(row.id)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表单底部 -->
      <div class="pagination-container">
        <el-pagination
          layout="slot,prev,next"
          :current-page.sync="search.pageIndex"
          prev-text="上一页"
          next-text="下一页"
          background
          :total="totalCount"
          :page-size="search.pageSize"
          @current-change="getWorkLoadList"
        >
          <template order="-1">
            <span
              class="el-pagination__total"
            >共{{ totalCount }}条记录 第 {{ search.pageIndex }}/{{
              totalPage
            }}
              页</span>
          </template>
        </el-pagination>
      </div>
    </div>

    <!-- 查看详情 -->
    <!-- <el-dialog
      title="人员详情"
      :visible.sync="detailDialog"
      width="630px"
      @close="userInfoClose"
    >
      <div style="width: 579px; min-height: 277px; margin: 0px auto;">
        <el-row class="user-info">
          <el-col :span="9">
            人员名称：{{ userInfo.userName }}
          </el-col>
          <el-col :span="7">
            角色：{{ userInfo.roleName }}
          </el-col>
          <el-col :span="8">
            联系电话：{{ userInfo.mobile }}
          </el-col>
          <el-col :span="24" class="region-name">
            负责区域：{{ userInfo.regionName }}
          </el-col>
        </el-row>
        <el-row class="user-work">
          <el-col class="item" :span="5">
             &nbsp;
          </el-col>
          <el-col class="item" :span="5">
            总工单数
          </el-col>
          <el-col class="item" :span="5">
            拒绝工单
          </el-col>
          <el-col class="item" :span="5">
            完成工单
          </el-col>
          <el-col class="item" :span="5">
            进行中工单
          </el-col>
        </el-row>
        <el-row class="user-work">
          <el-col class="item" :span="5">
            本周
          </el-col>
          <el-col class="item" :span="5">
            {{ weekData.total }}
          </el-col>
          <el-col class="item" :span="5">
            {{ weekData.cancelCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ weekData.workCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ weekData.progressTotal }}
          </el-col>
        </el-row>
        <el-row class="user-work">
          <el-col class="item" :span="5">
            本月
          </el-col>
          <el-col class="item" :span="5">
            {{ monthData.total }}
          </el-col>
          <el-col class="item" :span="5">
            {{ monthData.cancelCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ monthData.workCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ monthData.progressTotal }}
          </el-col>
        </el-row>
        <el-row class="user-work">
          <el-col class="item" :span="5">
            本年
          </el-col>
          <el-col class="item" :span="5">
            {{ yearData.total }}
          </el-col>
          <el-col class="item" :span="5">
            {{ yearData.cancelCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ yearData.workCount }}
          </el-col>
          <el-col class="item" :span="5">
            {{ yearData.progressTotal }}
          </el-col>
        </el-row>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import {
  getWorkLoadList
} from '@/api/user'
export default {
  name: 'WorkLoadContainer',
  data() {
    return {
      search: {
        pageIndex: 1,
        pageSize: 10,
        userName: '',
        roleId: '',
        isRepair: ''
      },
      roleList: [],
      detailDialog: false,
      addForm: {
        name: '',
        addr: '',
        areaCode: '',
        regionId: '',
        businessId: '',
        ownerId: '',
        ownerName: ''
      },
      addrDetail: '',
      partner: [],
      businessType: [],
      nodeDetailList: [],
      tableData: [],
      totalPage: 0,
      totalCount: 0,
      ereaList: [],
      currentId: null,
      currentName: '',
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'change' }],
        addr: [{ required: true, message: '请输入', trigger: 'change' }],
        areaCode: [{ required: true, message: '请输入', trigger: 'change' }],
        regionId: [{ required: true, message: '请输入', trigger: 'change' }],
        businessId: [{ required: true, message: '请输入', trigger: 'change' }],
        ownerId: [{ required: true, message: '请输入', trigger: 'change' }],
        ownerName: [{ required: true, message: '请输入', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getWorkLoadList()
    this.getEreaDetail()
  },
  methods: {
    closeFn() {
      this.addForm = {
        name: '',
        addr: '',
        areaCode: '',
        regionId: '',
        businessId: '',
        ownerId: '',
        ownerName: ''
      }
      this.$refs.addForm.resetFields()
      this.addFormDialog = false
    },
    async addFormFn() {
      this.addFormDialog = true
    },
    ownerChange() {
      this.addForm.ownerName = this.partner.find(
        (item) => item.id === this.addForm.ownerId
      ).name
    },
    handleChange(val) {
      this.addForm.areaCode = val.at(-1)
      this.addrDetail = getDataByTree(this.options, val).join('-')
      // this.addForm.addr =
      //   getDataByTree(this.options, val).join('-') + '-' + this.addForm.addr
      console.log(this.addForm.addr)
      console.log(this.addrDetail)
    },
    async getEreaDetail() {
      const res = await getEreaDetail({ ...this.search })
      this.totalCount = +res.totalCount
      this.totalPage = +res.totalPage
      this.tableData = res.currentPageRecords.map((item) => {
        item.addr = item.addr.split('-').at(-1)
        return item
      })
    },
    async showDetailDialog(id) {
      this.nodeDetailList = (await getNodeDetail(id)).map((item) => {
        item.vmStatus =
          item.vmStatus === 0
            ? '未投放'
            : item.vmStatus === 1
              ? '运营'
              : item.vmStatus === 3
                ? '撤机'
                : '无'
        item.lastSupplyTime = moment(item.lastSupplyTime).format('YYYY.MM.DD HH:mm:ss')
        return item
      })
      console.log(this.nodeDetailList)
      this.nodeDetailDialog = true
    },
    async delNode(id) {
      this.$message.success('点位删除成功')
      this.getEreaDetail()
    },
    async modifyNode(id) {
      this.currentId = id
    },
    // 搜索
    async getWorkLoadList() {
      const res = await getWorkLoadList({ ...this.search })
      console.log(res)
      this.tableData = res.currentPageRecords
      this.totalCount = +res.totalCount
      this.totalPage = +res.totalPage
    },
    async saveData() {
      this.$refs.addForm.validate(async(pass) => {
        if (!pass) return
        this.currentId
          ? await modifyNode({ ...this.addForm, id: this.currentId })
          : await addNode({ ...this.addForm })
        this.addFormDialog = false
        this.$message.success(`${this.currentId ? '编辑' : '新增'}成功`)
        this.getEreaDetail()
        this.closeFn()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/common.scss";
.search .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form-item__label {
  font-weight: normal;
}

.taskDetail .el-form-item {
  margin-bottom: 0;
}
</style>
